<template>
	<base-popup class="min-h-[80vh]" :show="!!sportsStore.detailDialog.show" @close="onClose">
		<template #title>
			<n-tabs
				class="mx-20"
				:value="sportsStore.detailDialog.tab"
				justify-content="space-evenly"
				size="large"
				:barWidth="40"
				animated
				@update:value="tabChange">
				<n-tab :name="SportsDetailTab.Market" :tab="$t('betting.more')"></n-tab>
				<n-tab :name="SportsDetailTab.Acivity" :tab="$t('betting.trend')"></n-tab>
			</n-tabs>
		</template>
		<div class="flex-1 flex flex-col px-9 py-2">
			<sports-match-card :data="match" class="shrink-0" />
			<sports-betting-analysis
				class="mt-2"
				:event-data="match"
				:event-id="sportsStore.detailDialog.eventId" />
			<sports-detail-market
				:event-id="sportsStore.detailDialog.eventId"
				v-if="sportsStore.detailDialog.tab === SportsDetailTab.Market" />
			<sports-detail-activity
				:event-id="sportsStore.detailDialog.eventId"
				v-if="sportsStore.detailDialog.tab === SportsDetailTab.Acivity" />
		</div>
	</base-popup>
</template>

<script lang="ts" setup>
import { NTabs, NTab } from 'naive-ui'
import SportsDetailMarket from './sports-detail-market.vue'
import SportsDetailActivity from './sports-detail-activity.vue'
import { SportsMatchCard, SportsBettingAnalysis } from '@/components/sports'
import { BasePopup } from '@/components/base'
import { useSportsStore, useMatchStore } from '@/store'
import { SportsDetailTab } from '@/types'
import { computed } from 'vue'

defineOptions({ name: 'ViewsSportsDetail' })

const sportsStore = useSportsStore()
const matchStore = useMatchStore()

const tabChange = (val: SportsDetailTab) => (sportsStore.detailDialog.tab = val)

const match = computed(() => {
	if (sportsStore.detailDialog.eventId) {
		return matchStore.getMatch(sportsStore.detailDialog.eventId)
	} else {
		return undefined
	}
})

const onClose = () =>
	sportsStore.setDetail({
		show: false
	})
</script>
